<template>
  <div class="stu-emp-detail-container">

    <div class="filter-container">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="学生姓名">
          <el-input v-model="queryParams.stuName" placeholder="请输入学生姓名" clearable />
        </el-form-item>

        <el-form-item label="专业">
          <el-input v-model="queryParams.stuMajor" placeholder="请输入专业名称" clearable />
        </el-form-item>

        <el-form-item label="班级">
          <el-input v-model="queryParams.clazzName" placeholder="请输入班级名称" clearable />
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>

          <!-- 点击按钮打开添加数据的对话框 -->
          <el-button type="primary" @click="openDialog">添加模拟面试数据</el-button>

        </el-form-item>
      </el-form>
    </div>

    <!-- 添加数据对话框 -->
    <el-dialog title="添加数据" v-model="dialogVisible">
      <el-form :model="form">
        <el-form-item label="学生编号" required>
          <el-input v-model="form.stuId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="年份" required>
          <el-input v-model="form.ivwYear" type="number" autocomplete="off" />
        </el-form-item>
        <el-form-item label="专业评分" required>
          <el-select v-model="form.ivwProGrade" placeholder="选择评分">
            <el-option v-for="option in gradeOptions" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="专业评价">
          <el-input v-model="form.ivwProEval" autocomplete="off" />
        </el-form-item>
        <el-form-item label="HR评分">
          <el-select v-model="form.ivwHrGrade" placeholder="选择HR评分">
            <el-option v-for="option in gradeOptions" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="HR评价">
          <el-input v-model="form.ivwHrEval" autocomplete="off" />
        </el-form-item>
        <el-form-item label="面试日期">
          <el-date-picker v-model="form.ivwDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date"
            placeholder="选择日期" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="addData">确认</el-button>
      </template>
    </el-dialog>

    <el-table :data="tableData" border style="width: 100%" v-loading="loading" stripe :row-class-name="tableRowClassName">
      <!-- 精简后的关键信息 -->
      <el-table-column prop="stuName" label="姓名" align="center" width="100" />
      <el-table-column prop="stuGender" label="性别" align="center" width="80">
        <template #default="{ row }">
          {{ row.stuGender || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="stuMajor" label="专业" align="center" />
      <el-table-column prop="clazzName" label="班级" align="center" width="120" />

      <!-- 就业关键信息 -->
      <el-table-column prop="empMethod" label="就业方式" align="center">
        <template #default="{ row }">
          {{ row.empMethod || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="entName" label="企业名称" align="center" width="150" />
      <el-table-column prop="jobTitle" label="岗位名称" align="center" width="120" />
      <el-table-column prop="empSalary" label="就业薪资" align="center" width="120">
        <template #default="{ row }">
          {{ row.empSalary ? `${row.empSalary}` : '-' }}
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" align="center" width="120" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="showDetail(row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.page" :page-sizes="[5, 10, 20, 50]" :page-size="queryParams.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </div>


    <!-- 详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="就业详情" width="80%" top="5vh">
      <el-descriptions :column="2" border>
        <!-- 学生信息 -->
        <el-descriptions-item label="学生ID">{{ currentDetail.stuId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ currentDetail.stuName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ currentDetail.stuGender || '-' }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ currentDetail.stuAge || '-' }}</el-descriptions-item>
        <el-descriptions-item label="学历">{{ currentDetail.stuEdu || '-' }}</el-descriptions-item>
        <el-descriptions-item label="专业">{{ currentDetail.stuMajor || '-' }}</el-descriptions-item>
        <el-descriptions-item label="毕业时间">{{ formatDate(currentDetail.stuGrad) }}</el-descriptions-item>

        <!-- 班级信息 -->
        <el-descriptions-item label="班级名称">{{ currentDetail.clazzName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="班主任ID">{{ currentDetail.clazzTeacher || '-' }}</el-descriptions-item>
        <el-descriptions-item label="就业开始时间">{{ formatDate(currentDetail.clazzStart) }}</el-descriptions-item>
        <el-descriptions-item label="就业天数">{{ currentDetail.clazzDays || '-' }}</el-descriptions-item>
        <el-descriptions-item label="项目经理ID">{{ currentDetail.clazzManager || '-' }}</el-descriptions-item>

        <!-- 面试评价 -->
        <el-descriptions-item label="专业等级">{{ currentDetail.ivwProGrade || '-' }}</el-descriptions-item>
        <el-descriptions-item label="专业评价">{{ currentDetail.ivwProEval || '-' }}</el-descriptions-item>
        <el-descriptions-item label="人事等级">{{ currentDetail.ivwHrGrade || '-' }}</el-descriptions-item>
        <el-descriptions-item label="人事评价">{{ currentDetail.ivwHrEval || '-' }}</el-descriptions-item>

        <!-- 就业信息 -->
        <el-descriptions-item label="就业方式">{{ currentDetail.empMethod || '-' }}</el-descriptions-item>
        <el-descriptions-item label="就业标签">
          {{ currentDetail.empTag || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="企业名称">{{ currentDetail.entName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="岗位名称">{{ currentDetail.jobTitle || '-' }}</el-descriptions-item>
        <el-descriptions-item label="薪资范围">{{ currentDetail.jobminSalary || '-' }}-{{ currentDetail.jobmaxSalary || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="就业薪资">{{ currentDetail.empSalary ? `${currentDetail.empSalary}` : '-'
        }}</el-descriptions-item>

        <!-- 系统信息 -->
        <el-descriptions-item label="创建时间">{{ formatDateTime(currentDetail.created) }}</el-descriptions-item>
      </el-descriptions>

      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getStuEmpDetailList } from '@/api/stu-api'
import { ElMessage } from 'element-plus'
import { interviewAddApi } from '@/api/emp-api'
import { da } from 'element-plus/es/locale';

// 弹窗表单
const form = ref({
  stuId: '',
  ivwYear: '',
  ivwProGrade: '',
  ivwProEval: '',
  ivwHrGrade: '',
  ivwHrEval: '',
  ivwDate: '',
});

// 评分选项
const gradeOptions = [
  { label: '优', value: '优' },
  { label: '良', value: '良' },
  { label: '一般', value: '一般' },
  { label: '差', value: '差' },
];

// 重置表单数据
const resetForm = () => {
  form.value = {
    stuId: '',
    ivwYear: '',
    ivwProGrade: '',
    ivwProEval: '',
    ivwHrGrade: '',
    ivwHrEval: '',
    ivwDate: '',
  };
};

// 弹窗
const dialogVisible = ref(false);
// 打开对话框
const openDialog = () => {
  dialogVisible.value = true;
};

// 取消对话框并重置表单
const cancelDialog = () => {
  resetForm();
  dialogVisible.value = false;
};

// 添加数据到原始数据中，并关闭对话框
const addData = async () => {
  // 检查表单字段是否为空
  /*  if (!form.value.stuId || !form.value.ivwYear || !form.value.ivwProGrade) {
     ElMessage.error('请填写必要信息！');
     return;
   } */
  // 直接调用 interviewAddApi 并获取返回值
  const response = await interviewAddApi(form.value);
  console.log('添加数据', response);
  // 检查响应状态码
  if (response.code === 200) {
    ElMessage.success('数据添加成功！');
    fetchData({ page: queryParams.value.page, size: queryParams.value.size });
  } else {
    ElMessage.error('数据添加失败！');
  }
  // 关闭对话框
  cancelDialog();
};

// 查询参数
const queryParams = ref<any>({
  stuName: '',
  stuMajor: '',
  clazzName: '',
  page: 1,
  size: 10
})

const tableData = ref([])
const total = ref(0)
const loading = ref(false)
const detailDialogVisible = ref(false)
const currentDetail = ref<any>({})

// 获取数据列表
const fetchData = async (data?: any) => {
  data
  try {
    loading.value = true
    const response = await getStuEmpDetailList(queryParams.value)
    tableData.value = response.data.list
    total.value = response.data.total
  } catch (error) {
    console.error('获取数据失败:', error)
    ElMessage.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

// 显示详情
const showDetail = (row: any) => {
  currentDetail.value = row
  detailDialogVisible.value = true
}

// 查询
const handleQuery = () => {
  queryParams.value.page = 1
  fetchData()
}

// 重置查询
const resetQuery = () => {
  queryParams.value = {
    stuName: '',
    stuMajor: '',
    clazzName: '',
    page: 1,
    size: 10
  }
  fetchData()
}

// 分页大小改变
const handleSizeChange = (val: any) => {
  queryParams.value.size = val
  fetchData()
}

// 当前页改变
const handleCurrentChange = (val: any) => {
  queryParams.value.page = val
  fetchData()
}

// 格式化日期
const formatDate = (date: any) => {
  if (!date) return '-'
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).replace(/\//g, '-')
}

// 格式化日期时间
const formatDateTime = (datetime: any) => {
  if (!datetime) return '-'
  return new Date(datetime).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-')
}

// 获取标签类型
const getTagType = (tag: any) => {
  if (!tag) return 'info'
  if (tag.includes('高薪')) return 'success'
  if (tag.includes('超时')) return 'warning'
  return ''
}

// 初始化加载数据
onMounted(() => {
  fetchData()
})

// 表格行样式
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  row
  if (rowIndex % 2 === 0) {
    return 'success-row'
  }
  return ''
}
</script>

<style>
.stu-emp-detail-container {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 表格单元格内容过长时显示省略号 */
.el-table :deep(.cell) {
  white-space: nowrap;
}

/* 详情对话框样式 */
:deep(.el-descriptions) {
  margin-top: 20px;
}

:deep(.el-descriptions__title) {
  width: 120px;
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>